import { defineComponent, reactive, ref } from "vue";
import styles from "./details.module.less";
import Breadcrumb from "@/components/public/Breadcrumb/Breadcrumb";
import { useRouter } from "vue-router";
import { CheckSquareFilled, HeartOutlined, HeartFilled } from "@ant-design/icons-vue";
import { imgPath } from "@/common/utils";
export default defineComponent({
  setup() {
    const router = useRouter();
    const state = reactive({
      name: '山东省旅游景区安全生产责任保险',
      is_collect: false,
    })
    const breadcrumbState = ref([
      () => <span class={styles['Breadcrumb-Home']} onClick={() => { router.push('/home') }}>首页</span>,
      () => <span class={styles['Breadcrumb-propertyLiability-details']}>{state.name}</span>,
    ])
    const ProductInfos = () => (
      <div class={styles['product-infos']}>
        <div class={styles['prod-title']}>
          <span class={styles['name']}>{state.name}</span>
          <img class={styles['trademark']} src={imgPath("/yongan.png")} />
          <div class={styles['flag']}>责任保险</div>
        </div>
        <div class={styles['prod-des-main']}>
          <div class={styles['jt-top']}>
            <div class={styles['prod-img']}>
              <img src="https://www.chinatourins.com/static/img/jingqu_yongan.87fb37d.png" />
            </div>
            <div class={styles['prod-des-text']}>
              <div class={styles['prod-des-item']}>
                <span class={styles['text-name']}>产品介绍：</span>
                <span class={styles['text-value']}>为有效转嫁山东省旅游景区安全经营风险，中联金安保险经纪有限公司联合永安财产保险股份有限公司为山东省旅游景区量身设计“旅游景区安全生产责任保险”。该款保险产品旨在保障游客和景区工作人员权益，转嫁景区责任风险，营造和谐的旅游环境。</span>
              </div>
              <div class={styles['prod-des-item']}>
                <span class={styles['text-name']}>保障期限：</span>
                <span class={[styles['text-value'], styles['color-orange']]}>一年</span>
              </div>
              <div class={styles['prod-des-item']}>
                <span class={styles['text-name']}>保障对象：</span>
                <span class={styles['text-value']}>旅游景区（点）的所有者、管理者或经营者</span>
              </div>
              <div class={styles['prod-des-item']} style={{ marginBottom: '46px' }}>
                <span class={styles['text-name']}>产品优势：</span>
                <div class={styles['prod-advantage']}>
                  <div class={styles['advantage-item']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>3000元以下赔偿，可快速理赔</span>
                  </div>
                  <div class={styles['advantage-item']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>保障人群涵盖景区游客和工作人员</span>
                  </div>
                  <div class={styles['advantage-item']}>
                    <CheckSquareFilled class={styles.icon} />
                    <span>医疗费用保额最高可到150万</span>
                  </div>
                </div>
              </div>
              <div class={styles['purchaseNow']}>立即投保</div>
            </div>
          </div>
          <div class={styles['jt-bottom']}>
            <div class={styles['sell-area']}>
              <span>销售范围：</span>
              中国大陆（除港澳台）
            </div>
            <div class={styles['collection']}>
              <HeartOutlined class={styles['is_unCollect']} v-show={!state.is_collect} />
              <HeartFilled class={styles['is_collect']} v-show={state.is_collect} />
              <span class={styles['col-content']}>收藏</span>
            </div>
            <div class={styles['sell-message']}>
              线上服务：☑投保 ☑核保 □批改 □退保 ☑报案 □理赔 ☑投诉{'\u00A0'}{'\u00A0'}{'\u00A0'}{'\u00A0'}线下服务：请致电400-855-8990
            </div>
          </div>
        </div>
      </div>
    )
    return () => (
      <div class={styles.details}>
        <div class={styles['details-content']}>
          <Breadcrumb list={breadcrumbState.value} />
          <ProductInfos />
        </div>
      </div>
    )
  }
})